<!doctype html>

<style>
    body{background:red}
    .rgba{
        width:300px;
        height:300px;
        background:rgba(0,0,255,0.5);
        position:absolute;
        left:0;
        TOP:0;
    }
    
    /*色轮模式*/
    .hsl{
        width:300px;
        height:300px;
        background:hsl(180,80%,50%);
        position:absolute;
        right:0;
        TOP:0;
    }
    
    
    .hsla{
        width:100%;
        height:300px;
        background:hsla(300,100%,50%,0.5);
        position:absolute;
        right:0;
        bottom:0;
    }
</style>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<div class="rgba"></div>
<div class="hsl"></div>
<div class="hsla"></div>